<template>
	<view class="classifyList">
		<!-- loading（没有数据时，或者没有更多数据时显示） -->
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		
		<view class="content">
			<navigator 
				:url="'/pages/preview/preview?id=' + item._id" 
				class="item" 
				v-for="item in classList"
				:key="item._id"
			>
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		
		<!-- 触底loading（与上述的判断条件刚好相反） -->
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>
		
		<!-- 适配微信小程序的安全区域 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad,onReachBottom,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app"
import { apiGetClassList } from "@/api/api.js"

// 查询参数
const queryParams = ref({
	classid:null, // 分类的id
	pageNum:1,
	pageSize:12
})
// 是否有更多数据
const noData = ref(false)

// 分类列表数据
const classList = ref([])
const getClassList = async () => {
	let res = await apiGetClassList(queryParams.value)
	// 翻页时采用追加
	classList.value = [
		...classList.value,
		...res.data
	]
	// 没有下一页了
	if(queryParams.value.pageSize > res.data.length) noData.value = true; 
	uni.setStorageSync("storgClassList", classList.value);	
}

// 触底加载更多
onReachBottom(()=>{
	// 若没有更多数据，则阻止这次网络请求
	if( noData.value ) return;
	queryParams.value.pageNum++;
	getClassList();
})

// 当前页面的导航标题
const pageName = ref()

// 获取页面传递过来的参数
onLoad((e) => {
	let { id=null,name=null } = e
	if ( id ) queryParams.value.classid = id;	
	if ( name ) pageName.value = name	
	
	// 修改当前页面的导航标题
	uni.setNavigationBarTitle({
		title: name
	})
	
	// 获取当前分类下的列表数据
	getClassList()
})

//分享给好友
onShareAppMessage((e)=>{
	return {
		title:"咸虾米壁纸-"+pageName,
		path:"/pages/classlist/classlist?id="+queryParams.classid+"&name="+pageName
	}
})

//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"咸虾米壁纸-"+pageName,
		query:"id="+queryParams.classid+"&name="+pageName
	}
})
</script>

<style lang="scss" scoped>
.classifyList{
	.content{
		padding: 5rpx;
		
		display: grid;
		gap: 5rpx;
		grid-template-columns: repeat(3, 1fr);
		
		.item{
			width: 100%;
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
}
</style>
